<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>JavaScript Tips - dispatchEvent を使いこなそう!! - 任意のタイミングでイベントを発行しよう</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script>
            
            window.onload = function() {
                
                var eBoxA = document.getElementById("boxA");    // boxA 要素取得
                var eBoxB = document.getElementById("boxB");    // boxB 要素取得
                
                // boxA にクリックイベントを登録
                eBoxA.addEventListener("click", function(e){
                    log("boxA");
                }, false);
                
                // boxB にクリックイベントを登録
                eBoxB.addEventListener("click", function(e){
                    log("boxB");
                    
                    // eBoxA のクリックイベントをディスパッチ起動
                    var evt = document.createEvent("MouseEvents");
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    eBoxA.dispatchEvent( evt );
                    
                    // webkit 系だと下記でも ok 
                    //eBoxA.dispatchEvent(new Event("click"));
                }, false);
            };
            
            var log = function(str) {
                console.log(str);
                
                var eConsole = document.getElementById("console");
                eConsole.innerHTML += str;
                eConsole.innerHTML += "\n";
            };
            
        </script>
    </head>
    
    <body>
        <header>
            <h1>JavaScript Tips - dispatchEvent を使いこなそう!! - 任意のタイミングでイベントを発行しよう</h1>
            <p>
                boxB をクリックした際に boxA のクリックイベントも発生するようにしてみました.
            </p>
            <p>
                boxA をクリックした際は "boxA" としか表示されませんが, boxB をクリックすると "boxB", "boxA" と表示されるのがわかるかと思います.
            </p>
        </header>
        
        <section>
            <h2>main</h2>
            <div id="main">
                <div id="boxA" class="box">boxA</div>
                <div id="boxB" class="box">boxB</div>
            </div>
        </section>
        
        <section>
            <h2>Console</h2>
            <pre id="console"></pre>
            <button onclick="document.getElementById('console').innerHTML = '';">Clear</button>
        </section>
        
        <footer>
            <h2>Links</h2>
            <a href="index.html">トップ</a>
        </footer>
    </body>
    
</html>